<template>
    <div>
		<div v-if="chenload">
			<div v-if='coursearr.length!=0||coursearr.length!="0"'>
				<div style="padding-bottom: 1.5rem;">
					<div style="margin-top: 0.07rem;width: 92%;margin: auto;" v-for="(item,index) in coursearr">
						<div class="con" v-if="item.type==1">
						
							<p class="zhe">
								{{item.rate}}<span>折</span>
							</p>
							<div class="time">
								<p>{{item.rate}}折优惠券</p>
								<!-- <p class="timeman">满{{item.amount}}元可使用</p> -->
								<p class="timeman" v-if="Number(item.top_amount)>0">满{{item.amount}}-{{item.top_amount}}元可使用</p>
								<p class="timeman" v-else>满{{item.amount}}元可使用</p>
								<p>有效期至 {{item.end_time}}</p>
							</div>
                           
							<div v-if="Number(item.top_amount)==0">
								<div v-if="Number(price)>=Number(item.amount)">
								   <van-button type="info" v-if='item.status==1||item.status=="1"' class="info" @click='infoclick(item.id,item.amount,item.top_amount,item.type,item.reduction)'>立即使用</van-button>
								   <van-button type="default" v-else class="info1">使用中</van-button>
								</div>
								<div v-else>
								   <van-button type="info" v-if='item.status==1||item.status=="1"' class="info1" @click='infoclick(item.id,item.amount,item.top_amount,item.type,item.reduction)'>不可使用</van-button>
								   <van-button type="default" v-else class="info1">使用中</van-button>
								</div>
							</div>
							<div v-else>
								<div v-if="Number(item.top_amount)<Number(price)">
								  <van-button type="info" class="info1" @click='infoclick(item.id,item.amount,item.top_amount,item.type,item.reduction)'>不可使用</van-button>
								</div>
								<div v-else>
								  <div v-if="Number(price)>=Number(item.amount)">
								     <van-button type="info" v-if='item.status==1||item.status=="1"' class="info" @click='infoclick(item.id,item.amount,item.top_amount,item.type,item.reduction)'>立即使用</van-button>
								     <van-button type="default" v-else class="info1">使用中</van-button>
								  </div>
								  <div v-else>
								     <van-button type="info" v-if='item.status==1||item.status=="1"' class="info1" @click='infoclick(item.id,item.amount,item.top_amount,item.type,item.reduction)'>不可使用</van-button>
								     <van-button type="default" v-else class="info1">使用中</van-button>
								  </div>
								</div>
							</div>
						</div>

                        	<div class="con" v-if="item.type==2">
                                <p class="zhe">
								<span>满减劵</span>
							</p>
							<div class="time">
								<p>减{{item.reduction}}元</p>
								<!-- <p class="timeman">满{{item.amount}}元可使用</p> -->
								<p class="timeman" v-if="Number(item.top_amount)>0">满{{item.amount}}-{{item.top_amount}}元可使用</p>
								<p class="timeman" v-else>满{{item.amount}}元可使用</p>
								<p>有效期至 {{item.end_time}}</p>
							</div>
						    <div>
								<div v-if="item.flag==1">
								   	<div v-if="Number(item.top_amount)==0">
								<div v-if="Number(price)>=Number(item.amount)">
								   <van-button type="info" v-if='item.status==1||item.status=="1"' class="info" @click='infoclick(item.id,item.amount,item.top_amount,item.type,item.reduction)'>立即使用</van-button>
								   <van-button type="default" v-else class="info1">使用中</van-button>
								</div>
								<div v-else>
								   <van-button type="info" v-if='item.status==1||item.status=="1"' class="info1" @click='infoclick(item.id,item.amount,item.top_amount,item.type,item.reduction)'>不可使用</van-button>
								   <van-button type="default" v-else class="info1">使用中</van-button>
								</div>
							</div>
							<div v-else>
								<div v-if="Number(item.top_amount)<Number(price)">
								  <van-button type="info" class="info1" @click='infoclick(item.id,item.amount,item.top_amount,item.type,item.reduction)'>不可使用</van-button>
								</div>
								<div v-else>
								  <div v-if="Number(price)>=Number(item.amount)">
								     <van-button type="info" v-if='item.status==1||item.status=="1"' class="info" @click='infoclick(item.id,item.amount,item.top_amount,item.type,item.reduction)'>立即使用</van-button>
								     <van-button type="default" v-else class="info1">使用中</van-button>
								  </div>
								  <div v-else>
								     <van-button type="info" v-if='item.status==1||item.status=="1"' class="info1" @click='infoclick(item.id,item.amount,item.top_amount,item.type,item.reduction)'>不可使用</van-button>
								     <van-button type="default" v-else class="info1">使用中</van-button>
								  </div>
								</div>
							</div>
								</div> 
								<div v-if="item.flag==0">
                                <van-button type="info" class="info1" @click="buke">不可使用</van-button>
								</div>
							</div>
							
							<div>

							</div>

						</div>


					</div>
				</div>
				<div class="nopaychoose" @click="nochooseclick">不使用优惠券</div>
			</div>
			<div v-else class="chen-kongbai">
				<div class="chen-kongpic">
					<img :src="imgSrc" mode=""></img>
				</div>
				<div class="chen-kong-text"><span>您暂未有任何优惠券</span></div>
			</div>
		</div>
          
		<div class="loadmore" v-else>
			<img src="../../../src/assets/img/load.gif" alt="">
		</div>
    </div>
</template>

<script>
    export default {
        name: "chooseyou",
		  data(){
			  return{
				imgSrc: require("../../assets/img/kongbai.png"), 
				chenload:false,
				coursearr:[],   //可用优惠券
				price:'',
				youid:'',
				order_id:this.$route.query.order_id
			  }
		  },
		methods:{
			// 查询用户可用优惠券
			coupon(){
				this.axios.get(this.$store.state.url +'Pay/coupon?id='+this.order_id).then(res=>{
					this.chenload=true;
					if(res.data.errcode==0||res.data.errcode=='0'){
						this.coursearr=res.data.data;
						 //console.log(this.coursearr);
					}
				})
			},
			// 点击立即使用
			infoclick(id,amount,top_amount,type,reduction){
				// console.log(Number(top_amount))
				// console.log(Number(this.price))
				if(Number(top_amount)>0){
					if(Number(top_amount)<Number(this.price)){
						// console.log(8989);
						layer.open({
							content: '该优惠券不可使用',
							skin: 'msg',
							time: 2 //1秒后自动关闭
						});
					}else{
						// console.log(111);
						if(Number(this.price)>=Number(amount)){
							this.$router.go(-1);
							sessionStorage.setItem('youid',id);
							localStorage.setItem('type',type);
							localStorage.setItem('reduction',reduction);
							// sessionStorage.setItem('youidchoose',1);
						}else{
							layer.open({
								content: '该优惠券不可使用',
								skin: 'msg',
								time: 2 //1秒后自动关闭
							});
							// sessionStorage.setItem('youidchoose',0);
						}
					}
				}else{
					if(Number(this.price)>=Number(amount)){
						this.$router.go(-1);
						sessionStorage.setItem('youid',id);
						localStorage.setItem('type',type);
						localStorage.setItem('reduction',reduction);
						// sessionStorage.setItem('youidchoose',1);
					}else{
						layer.open({
							content: '该优惠券不可使用',
							skin: 'msg',
							time: 2 //1秒后自动关闭
						});
						// sessionStorage.setItem('youidchoose',0);
					}
				}
		
			},
			buke(){
             layer.open({
							content: '该课程不可以使用',
							skin: 'msg',
							time: 2 //1秒后自动关闭
						});
			},
			// 点击不使用
			nochooseclick(){
				sessionStorage.setItem('youid',0);
				this.$router.go(-1);
			}
		},
		mounted() {
			this.sdk.getJSSDK('','',this.$store.state.url);
			this.coupon();
			this.price = this.$route.query.price;
			// this.youid = this.$route.query.youid;
			// sessionStorage.setItem('youid',this.youid);
			// sessionStorage.setItem('youidchoose',0);
			// console.log(this.$route.query.urlorder)
		}
    }
</script>

<style scoped>
	.nopaychoose{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: .88rem;
		line-height: .88rem;
		text-align: center;
		color: #666666;
		font-size: .36rem;
		border-top: 1px solid #D2D3D5;
	}
  >>>.van-hairline--top-bottom::after{
    border-width: 0 0;
  }
  >>>.van-tabs__wrap{
    box-shadow:0 3px 5px 0 rgba(71,68,80,0.06);
  }
  .kong{
    width: 2.8rem;
    margin-top: 36%;
  }
  .con{
    width: 100%;
    /* height: 1.37rem; */
    margin-top: 0.3rem;
    background: url("../../../src/assets/img/person/yi.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
	padding: .2rem .2rem;
  }
  .zhe{
    font-size:0.6rem;
    font-weight:bold;
    color:rgba(222,34,48,1);
    line-height:0.44rem;
  }
  .zhe span{
    font-size:0.34rem;
    color:rgba(222,34,48,1);
    line-height:0.24rem;
  }
  .time p:nth-child(1){
    font-size:0.3rem;
    color:rgba(51,51,51,1);
  }
  .time p:nth-child(2){
    font-size:0.24rem;
    color:rgba(153,153,153,1);
  }
  .timeman{
	  color: #DE2230 !important;
	  margin: .1rem 0;
  }
  .info{
    /* width:1.6rem; */
    height:0.46rem;
    background:rgba(2,135,255,1);
    border-radius:0.23rem;
    font-size: 0.24rem;
    line-height: 0.46rem;
    color: #fff;
	padding: 0 .24rem;
  }
  .info1{
    padding: 0 .24rem;
    height:0.46rem;
    background:#999999;
    border-radius:0.23rem;
    font-size: 0.24rem;
    line-height: 0.46rem;
    color: #fff;
	border: 1px solid #999999;
  }


</style>
